<template>
  <div class="">
    <!-- 性别piker -->
    <van-picker
      title="编辑性别"
      show-toolbar
      :columns="columns"
      :default-index="usrInfo.gender"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import { editUser } from '@/api/user.js';

export default {
  name: 'update-gender',
  props: {
    // 用户信息
    usrInfo: {
      required: true,
    },
  },
  data() {
    return {
      columns: ['男', '女'],
      //         0     1
    };
  },
  created() {},
  methods: {
    onCancel() {
      // 关闭 弹窗，并 将 修改前的性别 传回去
      this.$emit('closePop', this.usrInfo.gender);
    },
    async onConfirm(v, i) {
      try {
        await editUser({ gender: i });
        this.$toast.success('修改成功 : )');
        this.$emit('closePop', i);
      } catch (err) {
        this.$toast.fail('修改失败 : (');
      }
    },
  },
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background: #fff !important;
  /deep/ .van-nav-bar__title {
    color: #000 !important;
  }
  /deep/ .van-nav-bar__text {
    color: #000 !important;
  }
}
</style>
